<template>
	<view class="product-wrap">
		<template v-for="(item, index) in spuList">
			<view class="container" v-if="item.haveStock || isShowNoStock" @click="goToGoodDetail(item.id,index)" :key="index">
				<view class="product-item exposure"
					:data-mark="item.historyMark"
					:data-id="item.id"
					:data-index="index+1"
					:data-ui="index"
					:data-type="1"
					:data-moduleOrder="moduleOrder"
					:data-moduleId="refModuleId"
					:data-moduleType="'prod_list'">
					<view style="position: relative;" :class="{'sale-out': countPrice(item).haveStock == 0}">
						<image :src="item.mainImageUrl" class="image"></image>
						<view class="empty-image" v-if="item.activityInfo&&(item.activityInfo.type == 2 || item.activityInfo.type == 3)&&(item.activityInfo.activityObject.stockQuantity == 0 || item.activityInfo.activityObject.stockQuantity == null) ">
							<image class="img" src="/static/img/search/ic_shoppingcart_nothing.png"></image>
						</view>
					</view>
					<!-- <view v-if="item.minJfCost" class="can-interal-mall"> -->
					<!-- <image src="/static/public/ic_jifen@2x.png" class="interal-image"></image> -->
					<!-- {{item.minJfCost}}移动积分 -->
					<!-- </view> -->
					<view class="des clearfix">
						<!-- <view class="pro-icon-box"> -->
							<!-- todo秒杀 -->
							<i class="miaoShaIcon img_align" v-if="item.activityType == 2"></i>
							<i class="presall-icon img_align" v-if="item.presellStatus == 1"></i>
							<i class="miguIcon img_align" v-if="!(item.activityType == 2&&item.presellStatus == 1)&&item.commercialType == 2"></i>
						<!-- </view> -->
						{{item.labels||''}}{{item.name}}
					</view>
					<view class="items">
						<!-- <text class="price" v-if="item.fractional"><text class="small">￥</text>{{item.interger}}.<text class="small">{{item.fractional}}</text></text>
						<text class="price" v-if="!item.fractional"><text class="small">￥</text>{{item.interger}}</text> -->
						<!-- <text class="price" v-if="!item.minInternalPrice"><text class="small">￥</text>{{item.minVipPrice/100||0}}</text> -->
						<!-- <text class="payments">
							<text>{{item.salesCount == 'null' ? 0 : item.salesCount }}</text>
							人已付款
						</text> -->
						<!-- 内购商品 -->
						<block v-if="sourceType =='206'">
							<text class="priceLable" style="margin-left: 24rpx;"></text>
							<view class="startPrice">
								<text class="price">
									<text class="small">{{priceBefore}}</text>
									{{item.minInternalPrice/100||0}}{{priceAfter}}
								</text>
								<del v-if="isShowMarketValue&&countPrice(item).delprice">￥{{countPrice(item).delprice}}</del>
							</view>
						</block>
						<!-- 会员专区商品 -->
						<block v-else-if="sourceType == '204'">
							<text class="priceLable2" style="margin-left: 24rpx;"></text>
							<view class="startPrice">
								<text class="price">
									<text class="small">{{priceBefore}}</text>
									{{item.minVipPrice/100||0}}{{priceAfter}}
								</text>
								<del v-if="isShowMarketValue&&countPrice(item).delprice">￥{{countPrice(item).delprice}}</del>
							</view>
						</block>
						<!-- 普通商品 -->
						<block v-else>
							<!-- <text class="price">
								<text class="small" v-if="countPrice(item).price">￥</text>
								{{countPrice(item).price}}
							</text> -->
							<text :class="countPrice(item).priceSign" v-if="countPrice(item).priceSign"></text>
							<text class="integralSign font10" v-if="item.minJfCost && false"> {{item.minJfCost}}移动积分 </text>
							<view class="startPrice">
			          <text class="price">
			            <text class="small">{{countPrice(item).noPrice ? '' : priceBefore}}</text>
			            {{countPrice(item).price}}{{countPrice(item).noPrice ? '' : priceAfter}}
			          </text>
								<del v-if="isShowMarketValue&&countPrice(item).delprice">￥{{countPrice(item).delprice}}</del>
							</view>
						</block>
					</view>
					<!-- 预约，预售不能加入购物车 -->
					<view class="add-cart" v-if="isShowAddCart && countPrice(item).activityType != 1 && countPrice(item).activityType != 4" @click.stop="openNormsModal(item.id)"></view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			spuList: {
				type: Array,
				default: () => {
					return []
				}
			},
			sourceType: {
				type: String,
				default: () => {
					return ''
				}
			},
			index: {
				type: Number,
				default: 0
			},
			title: {
				type: String,
				default: ''
			},
			fragmentId: {
				type: Number,
				default: 0
			},
			refModuleId: {
				type: [Number,String],
				default: 0
			},
			//来源模块在页面的排序序号
			moduleOrder: {
				type: [Number,String],
				default: 0
			},
			isShowAddCart: {
				//是否显示加购物车按钮
				type: [Boolean, String],
				default: false
			}
		},
		inject:['exposure'],
		created() {
			try{
				this.exposure && this.exposure.push(this)
			}catch(e){
				//TODO handle the exception
			}
		},
		computed:{
			isShowMarketValue(){
				return this.$globalData.state.isShowMarketValue
			}
		},
		methods: {
			countPrice(item) {
				return this.$utils.judgeStatusPrice(item)
			},
			goToGoodDetail(spuId, i) {
				try {
					this.exposure.handleClick(spuId);
				} catch (e) {
					//TODO handle the exception
				}
				var statInfo = {'Ref_Module_Type':this.title||this.sourceType,'Ref_Module_ID':this.refModuleId,'Ref_Module_Order':this.moduleOrder,'Ref_Module_Inner_Order':i+1}
				this.$routeUtils.navigateTo({
					url: "/pages/goods/detail?spuId=" + spuId
				}, statInfo)
			},
			openNormsModal(spuId){//打开购物弹窗
				this.$emit('openNormsModal',spuId);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.product-wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 0 15rpx;
	}

	.container{
		width: 50%;
	}

	.product-item {
		width: 342rpx;
		height: 526rpx;
		border-radius: 8rpx;
		background-color: #ffffff;
		margin: 9rpx;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;

		.image {
			width: 342rpx;
			height: 342rpx;
			background-color: #EAEAEA;
			display: block;
		}

		.can-interal-mall {
			// background: url('../../../static/img/integralMall/can_interal_mall.png') no-repeat;
			// background-size: 100%;
			background: rgba(255, 255, 255, 0.8);
			height: 48rpx;
			line-height: 48rpx;
			width: 100%;
			position: absolute;
			top: 294rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(0, 128, 203, 1);
			text-align: center;

			.interal-image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
				vertical-align: text-bottom;
			}
		}

		.des {
			font-size: 26rpx;
			color: #333;
			margin: 20rpx 24rpx 0 24rpx;
			line-height: 36rpx;
			display: block;
			text-align: left;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.items {
			position: absolute;
			bottom: 16rpx;
			text-align: left;
			left: 24rpx;

			.price {
				margin-left: 0rpx;
				// margin-right: 16rpx;
				color: #ff004f;
				font-size: 32rpx;
				font-weight: 600;

				.small {
					font-size: 20rpx;
				}
			}

			.payments {
				margin-right: 24rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
		.add-cart{
			width: 40rpx;
			height: 40rpx;
			background: url('https://ss.migudm.cn/malleoc/public/ic_oupon_cart.png') no-repeat;
			background-size: 100% 100%;
			position: absolute;
			right: 16rpx;
			bottom: 16rpx;
			border-radius: 50%;
			z-index: 2;
		}


		.startPrice {
			// margin-left: 24rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(102, 102, 102, 0.8);
		}

	}

	.empty-image {
		width: 342rpx;
		height: 342rpx;
		background: rgba(0, 0, 0, 0.3);
		position: absolute;
		border-radius: 6rpx;
		left: 0;
		top: 0;

		.img {
			width: 136rpx;
			height: 136rpx;
			background: rgba(0, 0, 0, 0);
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -68rpx;
			margin-top: -68rpx;
		}
	}
	
	.pro-icon-box{
		margin-top: 4rpx;
	}
	.img_align{
		vertical-align: middle;
	}
</style>
